<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>
        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }

        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }

        .avatar-uploader-icon {
            font-size: 25px;
            color: #8c939d;
            width: 50px;
            height: 50px;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>菜单管理</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="菜单名称" v-model="pagination.queryString" style="width: 200px;"
                          class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                <el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()" style="left: 20px">新建一级菜单
                </el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="tableData" stripe highlight-current-row>
                <el-table-column prop="index" align="center" label=" " width="30px">
                    <template slot-scope="scope">
                        <div @click="treeClick(scope.row,scope.$index)" style="cursor: pointer;">
                            <template v-if="scope.row.children && scope.row.children.length > 0">
                                <i class="el-icon-arrow-down" :style="'margin-left:'+(scope.row.level-1)*2+'em;'"
                                   v-if="scope.row.open"></i>
                                <i class="el-icon-arrow-right" :style="'margin-left:'+(scope.row.level-1)*2+'em;'"
                                   v-else></i>
                            </template>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="菜单序号" align="center" width="100px"></el-table-column>
                <el-table-column prop="name" label="菜单名称" align="center"></el-table-column>
                <el-table-column prop="linkUrl" label="菜单链接" align="center"></el-table-column>
                <el-table-column label="菜单图标" align="center">
                    <template slot-scope="scope">
                        <i class="fa" :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="菜单描述" align="center"></el-table-column>
                <el-table-column label="菜单等级" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.level == '1' ? '一级' : '二级'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="right" width="300px">
                    <template slot-scope="scope">

                        <el-button type="primary" size="mini" @click.native="fatherHandleEdit(scope.row)"
                                   v-if="scope.row.level == '1'">编辑
                        </el-button>
                        <el-button type="primary" size="mini" @click.native="childHandleEdit(scope.row)"
                                   v-if="scope.row.level == '2'">编辑
                        </el-button>
                        <el-button type="primary" size="mini" v-if="scope.row.level == '1'"
                                   @click="handleCreateChild(scope.row)">
                            添加子菜单
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

            <!-- 新增父菜单弹层 -->
            <div class="add-form">
                <el-dialog title="新建一级菜单" :visible.sync="dialogFormVisible">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="菜单信息" name="first">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
                                     label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="菜单序号" prop="path">
                                            <el-select v-model="formData.path" placeholder="请选择">
                                                <el-option
                                                        v-for="item in fatherOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="菜单名称" prop="name">
                                            <el-input v-model="formData.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="菜单链接" prop="linkUrl">
                                            <el-input v-model="formData.linkUrl"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <!--                                <el-row>-->
                                <!--                                    <el-col :span="24">-->
                                <!--                                        <el-form-item label="菜单图标">-->
                                <!--                                            &lt;!&ndash;  class: 样式-->
                                <!--                                                  action：上传的图片url, 添加setmeal对应的controller upload的方法，MultipartFile 参数名要与文件的参数名一致-->
                                <!--                                                  name="imgFile" 文件的参数名 <input type=file name=imgFile-->
                                <!--                                                  auto-upload: 是否自动上传，当打开选择文件窗口后，true:一旦选择了一个文件，它就会自动触发上传-->
                                <!--                                                  show-file-list: 显示上传过的文件列表 false不显示-->
                                <!--                                                  on-success: 上传成功后回调handleAvatarSuccess方法, 补全formData.img属性值-->
                                <!--                                                  before-upload: 上传文件前调用方法-->
                                <!--                                                  &ndash;&gt;-->
                                <!--                                            <el-upload-->
                                <!--                                                    class="avatar-uploader"-->
                                <!--                                                    action="/menu/upload.do"-->
                                <!--                                                    :auto-upload="autoUpload"-->
                                <!--                                                    name="imgFile"-->
                                <!--                                                    :show-file-list="false"-->
                                <!--                                                    :on-success="handleAvatarSuccess">-->
                                <!--                                                &lt;!&ndash; 判断imageUrl变量是否有值，如果有值就输出这个标签<img>-->
                                <!--                                                    回显图片,imageUrl赋予完整路径-->
                                <!--                                                 &ndash;&gt;-->
                                <!--                                                <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
                                <!--                                                &lt;!&ndash;   如果imageUrl没值，就输出下面这个标签<i> &ndash;&gt;-->
                                <!--                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                                <!--                                            </el-upload>-->
                                <!--                                        </el-form-item>-->
                                <!--                                    </el-col>-->
                                <!--                                </el-row>-->
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="菜单描述">
                                            <el-input v-model="formData.description"
                                                      type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleAdd()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

            <!-- 新增子菜单弹层 -->
            <div class="update-form">
                <el-dialog title="新建二级菜单" :visible.sync="childDialogFormVisible">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="菜单信息" name="first">
                            <el-form ref="childDataAddForm" :model="formData" :rules="rules" label-position="right"
                                     label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="父菜单名称">
                                            <el-input v-model="fatherName" :disabled="true"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="子菜单序号" prop="path">
                                            <el-select v-model="formData.path" placeholder="请选择">
                                                <el-option
                                                        v-for="item in childOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="子菜单名称" prop="name">
                                            <el-input v-model="formData.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="子菜单链接" prop="linkUrl">
                                            <el-input v-model="formData.linkUrl"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="子菜单描述">
                                            <el-input v-model="formData.description"
                                                      type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleAddChild()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

            <!-- 编辑父菜单弹层 -->
            <div class="update-form">
                <el-dialog title="编辑一级菜单" :visible.sync="dialogFormVisible4Edit">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="菜单信息" name="first">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
                                     label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="菜单序号" prop="path">
                                            <el-select v-model="formData.path" placeholder="请选择">
                                                <el-option
                                                        v-for="item in fatherOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="菜单名称" prop="name">
                                            <el-input v-model="formData.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="菜单链接" prop="linkUrl">
                                            <el-input v-model="formData.linkUrl"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <!--                                <el-row>-->
                                <!--                                    <el-col :span="24">-->
                                <!--                                        <el-form-item label="菜单图标">-->
                                <!--                                            &lt;!&ndash;  class: 样式-->
                                <!--                                                  action：上传的图片url, 添加setmeal对应的controller upload的方法，MultipartFile 参数名要与文件的参数名一致-->
                                <!--                                                  name="imgFile" 文件的参数名 <input type=file name=imgFile-->
                                <!--                                                  auto-upload: 是否自动上传，当打开选择文件窗口后，true:一旦选择了一个文件，它就会自动触发上传-->
                                <!--                                                  show-file-list: 显示上传过的文件列表 false不显示-->
                                <!--                                                  on-success: 上传成功后回调handleAvatarSuccess方法, 补全formData.img属性值-->
                                <!--                                                  before-upload: 上传文件前调用方法-->
                                <!--                                                  &ndash;&gt;-->
                                <!--                                            <el-upload-->
                                <!--                                                    class="avatar-uploader"-->
                                <!--                                                    action="/menu/upload.do"-->
                                <!--                                                    :auto-upload="autoUpload"-->
                                <!--                                                    name="imgFile"-->
                                <!--                                                    :show-file-list="false"-->
                                <!--                                                    :on-success="handleAvatarSuccess">-->
                                <!--                                                &lt;!&ndash; 判断imageUrl变量是否有值，如果有值就输出这个标签<img>-->
                                <!--                                                    回显图片,imageUrl赋予完整路径-->
                                <!--                                                 &ndash;&gt;-->
                                <!--                                                <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
                                <!--                                                &lt;!&ndash;   如果imageUrl没值，就输出下面这个标签<i> &ndash;&gt;-->
                                <!--                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                                <!--                                            </el-upload>-->
                                <!--                                        </el-form-item>-->
                                <!--                                    </el-col>-->
                                <!--                                </el-row>-->
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="菜单描述">
                                            <el-input v-model="formData.description"
                                                      type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

            <!-- 编辑子菜单弹层 -->
            <div class="add-form">
                <el-dialog title="编辑二级菜单" :visible.sync="childDialogFormVisible4Edit">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="菜单信息" name="first">
                            <el-form ref="childDataAddForm" :model="formData" :rules="rules" label-position="right"
                                     label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="子菜单序号">
                                            <el-input v-model="formData.path"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="子菜单名称" prop="name">
                                            <el-input v-model="formData.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="子菜单链接" prop="linkUrl">
                                            <el-input v-model="formData.linkUrl"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="子菜单描述">
                                            <el-input v-model="formData.description"
                                                      type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var util = {};
    util.treeTableXcode = function (data, xcode) {
        xcode = xcode || "";
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            item.xcode = xcode + i;
            if (item.children && item.children.length > 0) {
                util.treeTableXcode(item.children, item.xcode + "-");
            }
        }
    };

    new Vue({
        el: "#app",
        data: function () {
            var tableData = [];
            util.treeTableXcode(tableData);
            var data = {
                tableData: tableData,
                //分页相关属性
                pagination: {
                    currentPage: 1,
                    pageSize: 100,
                    total: 100,
                    queryString: null
                },
                formData: {},//添加/编辑表单数据
                //校验
                rules: {
                    name: [{required: true, message: '菜单名称为必填项', trigger: 'blur'}],
                    path: [{required: true, message: '菜单序号为必填项', trigger: 'blur'}],
                },
                //新增窗口显示
                dialogFormVisible: false,
                childDialogFormVisible: false,
                //编辑窗口显示
                dialogFormVisible4Edit: false,
                childDialogFormVisible4Edit: false,
                activeName: 'first',//添加/编辑窗口Tab标签名称
                autoUpload: true,//自动上传
                imageUrl: null,//模型数据，用于上传图片完成后图片预览
                fatherName: '',//父菜单名称
                fatherId: 0,//父菜单ID
                fatherPath: '',//父菜单Path
                childOptions: [],
                fatherOptions: [{
                    value: '1',
                    label: '1'
                }, {
                    value: '2',
                    label: '2'
                }, {
                    value: '3',
                    label: '3'
                }, {
                    value: '4',
                    label: '4'
                }, {
                    value: '5',
                    label: '5'
                }, {
                    value: '6',
                    label: '6'
                }, {
                    value: '7',
                    label: '7'
                }, {
                    value: '8',
                    label: '8'
                }, {
                    value: '9',
                    label: '9'
                }, {
                    value: '10',
                    label: '10'
                }],
            }
            return data;
        },
        methods: {
            // 重置表单
            resetForm() {
                this.formData = {};// 弹窗数据清空
                this.fatherId = 0
            },
            // 弹出新增菜单窗口
            handleCreate() {
                // 重置表单
                this.resetForm();
                // 弹出新增窗口
                this.dialogFormVisible = true;
            },
            //添加菜单
            handleAdd() {
                this.formData.level = 1
                // 编辑表单校验
                this.$refs['dataAddForm'].validate((valid) => {
                    // 添加检查组确定按钮的提交
                    axios.post('/menu/add.do', this.formData).then(res => {
                        if (res.data.flag) {
                            this.$message.success(res.data.message);
                            // 关闭新增窗口
                            this.dialogFormVisible = false;
                            // 刷新列表数据
                            this.findPage();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                });
            },
            // 弹出新增子菜单窗口
            handleCreateChild(row) {
                // 重置表单
                this.resetForm();
                this.fatherName = row.name;
                this.fatherId = row.id;
                this.fatherPath = row.path;
                this.childOptions = [{
                    value: '/' + this.fatherPath + '-1',
                    label: '/' + this.fatherPath + '-1'
                }, {
                    value: '/' + this.fatherPath + '-2',
                    label: '/' + this.fatherPath + '-2'
                }, {
                    value: '/' + this.fatherPath + '-3',
                    label: '/' + this.fatherPath + '-3'
                }, {
                    value: '/' + this.fatherPath + '-4',
                    label: '/' + this.fatherPath + '-4'
                }, {
                    value: '/' + this.fatherPath + '-5',
                    label: '/' + this.fatherPath + '-5'
                }, {
                    value: '/' + this.fatherPath + '-6',
                    label: '/' + this.fatherPath + '-6'
                }, {
                    value: '/' + this.fatherPath + '-7',
                    label: '/' + this.fatherPath + '-7'
                }, {
                    value: '/' + this.fatherPath + '-8',
                    label: '/' + this.fatherPath + '-8'
                }, {
                    value: '/' + this.fatherPath + '-9',
                    label: '/' + this.fatherPath + '-9'
                }, {
                    value: '/' + this.fatherPath + '-10',
                    label: '/' + this.fatherPath + '-10'
                }];
                // 弹出新增窗口
                this.childDialogFormVisible = true;
            },
            //新增子菜单
            handleAddChild() {
                this.formData.parentMenuId = this.fatherId;
                this.formData.level = 2;
                // 编辑表单校验
                this.$refs['childDataAddForm'].validate((valid) => {
                    // 添加检查组确定按钮的提交
                    axios.post('/menu/add.do', this.formData).then(res => {
                        if (res.data.flag) {
                            this.$message.success(res.data.message);
                            // 关闭新增窗口
                            this.childDialogFormVisible = false;
                            // 刷新列表数据
                            this.findPage();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                });
            },
            // 弹出一级菜单编辑窗口
            fatherHandleEdit(row) {
                var id = row.id;
                //重置表单
                this.resetForm();
                //发送请求通过id查询检查组信息，绑定到formData. 检查组信息回显
                axios.get('/menu/findById.do?id=' + id).then(res => {
                    if (res.data.flag) {
                        this.formData = res.data.data;
                        // 弹出编辑窗口()
                        this.dialogFormVisible4Edit = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },
            // 弹出二级菜单编辑窗口
            childHandleEdit(row) {
                var id = row.id;
                //重置表单
                this.resetForm();
                //发送请求通过id查询检查组信息，绑定到formData. 检查组信息回显
                axios.get('/menu/findById.do?id=' + id).then(res => {
                    if (res.data.flag) {
                        this.formData = res.data.data;
                        // 弹出编辑窗口()
                        this.childDialogFormVisible4Edit = true;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },
            //修改的提交
            handleEdit() {
                // 修改检查组确定按钮的提交
                axios.post('/menu/update.do', this.formData).then(res => {
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    if (res.data.flag) {
                        // 关闭编辑窗口
                        this.dialogFormVisible4Edit = false;
                        this.childDialogFormVisible4Edit = false;
                        // 刷新列表数据
                        this.findPage();
                    }
                });
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            //分页查询
            findPage() {
                axios.post('/menu/findPage.do', this.pagination).then(res => {
                    if (res.data.flag) {
                        // 绑定分页数据
                        this.tableData = res.data.data.rows;
                        // 总记录数
                        this.pagination.total = 5;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
                // response 是经过了elementUI处理的。response => result对象
                if (response.flag) {
                    // 给formData补全img属性值
                    this.formData.img = response.data.imgName;
                    // 回显图片,给imageUrl 完整的图片路径
                    this.imageUrl = response.data.domain + response.data.imgName;
                } else {
                    this.$message.error(response.message);
                }
            },
            // 删除
            handleDelete(row) {
                // 弹出询问
                var id = row.id;// 检查项id
                // 弹出询问
                this.$confirm('此操作将【永久删除】该菜单项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 提交删除的请求
                    axios.get('/menu/deleteById.do?menuId=' + id).then(res => {
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? "success" : "error"
                        });
                        if (res.data.flag) {
                            // 刷新列表
                            this.findPage();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            menuAdd: function () {

            }
            ,
            treeClick: function (item, index) {
                if (item.open) {
                    this.collapse(item, index);
                } else {
                    this.expand(item, index);
                }
            }
            ,
            expand: function (item, index) {
                if (!item.children) {
                    return index;
                }
                //展开
                for (var i = 0; item.children && i < item.children.length; i++) {
                    var child = item.children[i];
                    this.tableData.splice(++index, 0, child);
                    if (child.children && child.children.length > 0 && child.open) {
                        index = this.expand(child, index);
                    }
                }
                item.open = true;
                return index;
            }
            ,
            collapse: function (item, index) {
                if (!item.children) {
                    return index;
                }
                //收缩
                item.open = false;
                var len = 0;
                for (var i = index + 1; i < this.tableData.length - 1; i++) {
                    var xcode = this.tableData[i].xcode;
                    if (xcode.startsWith(item.xcode + "-")) {
                        len++;
                    } else {
                        break;
                    }
                }
                this.tableData.splice(index + 1, len);
            }
        },
        created() {
            this.findPage();
        }
        ,
    })
    ;


    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    // var vue = new Vue({
    //     el: '#app',
    //     data: {
    //         activeName: 'first',//添加/编辑窗口Tab标签名称
    //         pagination: {//分页相关属性
    //             currentPage: 1,
    //             pageSize: 10,
    //             total: 100,
    //             queryString:null
    //         },
    //         dataList: [],//菜单数据
    //         formData:{},//编辑表单数据
    //         fatherFormData: {},//一级表单数据
    //         chileFormData: {},//二级表单数据
    //         //tableData:[],//新增和编辑表单中对应的检查项列表数据
    //         //checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交,选中的检查项id
    //         dialogFatherFormVisible: false,//控制添加窗口显示/隐藏
    //         dialogChildFormVisible: false,//控制添加窗口显示/隐藏
    //         dialogFormVisible4Edit: false,//控制编辑窗口显示/隐藏
    //         //校验
    //         rules: {
    //             path: [{required: true, message: '菜单层级为必填项', trigger: 'blur'}],
    //             name: [{required: true, message: '菜单名称为必填项', trigger: 'blur'}],
    //             linkUrl: [{required: true, message: '菜单链接为必填项', trigger: 'blur'}],
    //         }
    //     },
    //     created() {
    //         this.findPage();
    //     },
    //     methods: {
    //         //添加菜单
    //         handleAdd() {
    //             // 编辑表单校验
    //             this.$refs['dataAddForm'].validate((valid) => {
    //                 // 添加检查组确定按钮的提交
    //                 axios.post('/menu/add.do', this.fatherFormData).then(res => {
    //                     if (res.data.flag) {
    //                         this.$message.success(res.data.message);
    //                         // 关闭新增窗口
    //                         this.dialogFormVisible = false;
    //                         // 刷新列表数据
    //                         this.findPage();
    //                     } else {
    //                         this.$message.error(res.data.message);
    //                     }
    //                 })
    //             });
    //         },
    //         //修改的提交
    //         handleEdit() {
    //             // 修改检查组确定按钮的提交
    //             axios.post('/checkgroup/update.do', this.fatherFormData).then(res => {
    //                 this.$message({
    //                     message: res.data.message,
    //                     type: res.data.flag ? "success" : "error"
    //                 });
    //                 if (res.data.flag) {
    //                     // 关闭编辑窗口
    //                     this.dialogFormVisible4Edit = false;
    //                     // 刷新列表数据
    //                     this.findPage();
    //                 }
    //             });
    //         },
    //         //分页查询
    //         findPage() {
    //             axios.post('/menu/findPage.do', this.pagination).then(res => {
    //                 if (res.data.flag) {
    //                     // 绑定分页数据
    //                     this.dataList = res.data.data.rows;
    //                     // 总记录数
    //                     this.pagination.total = res.data.data.total;
    //                 } else {
    //                     this.$message.error(res.data.message);
    //                 }
    //             })
    //         },
    //         // 重置表单
    //         resetForm() {
    //             this.fatherFormData = {};
    //             this.chileFormData = {};
    //             this.tableData = [];// 检查项列表数据清空
    //             this.checkitemIds = [];// 清空选中的检查项
    //             this.activeName = 'first';// 选中基本信息
    //         },
    //         // 弹出添加菜单窗口
    //         handleCreate() {
    //             // 重置表单
    //             this.resetForm();
    //             // 弹出新增窗口
    //             this.dialogFormVisible = true;
    //         },
    //         // 弹出编辑窗口
    //         // handleUpdate(row) {
    //         //     var id = row.id; // 检查组的id
    //         //     //重置表单，
    //         //     this.resetForm();
    //         //     // 弹出编辑窗口()
    //         //     this.dialogFormVisible4Edit = true;
    //         //     //发送请求通过id查询检查组信息，绑定到formData. 检查组信息回显
    //         //     axios.get('/checkgroup/findById.do?id=' + id).then(res => {
    //         //         if (res.data.flag) {
    //         //             this.formData = res.data.data;
    //         //             // 构建检查项列表，查询所有的检查项，绑定到tableData
    //         //             axios.get('/checkitem/findAll.do').then(res1 => {
    //         //                 if (res1.data.flag) {
    //         //                     // 绑定检查项列表
    //         //                     this.tableData = res1.data.data;
    //         //                     //回显钩选中的检查项，发送请求，通过检查组id查询选中的检查项id，绑定到checkitemIds
    //         //                     axios.get('/checkgroup/findCheckItemIdsByCheckGroupId.do?id=' + id).then(res2 => {
    //         //                         if (res2.data.flag) {
    //         //                             this.checkitemIds = res2.data.data;
    //         //                         } else {
    //         //                             this.$message.error(res2.data.message);
    //         //                         }
    //         //                     })
    //         //                 } else {
    //         //                     this.$message.error(res1.data.message);
    //         //                 }
    //         //             });
    //         //
    //         //         } else {
    //         //             this.$message.error(res.data.message);
    //         //         }
    //         //     });
    //         // },
    //         //切换页码
    //         handleCurrentChange(currentPage) {
    //             this.pagination.currentPage = currentPage;
    //             this.findPage();
    //         },
    //         // 删除
    //         // handleDelete(row) {
    //         //     // 弹出询问
    //         //     var id = row.id;// 检查项id
    //         //     // 弹出询问
    //         //     this.$confirm('此操作将【永久删除】该检查组, 是否继续?', '提示', {
    //         //         confirmButtonText: '确定',
    //         //         cancelButtonText: '取消',
    //         //         type: 'warning'
    //         //     }).then(() => {
    //         //         // 提交删除的请求
    //         //         axios.post('/checkgroup/deleteById.do?id=' + id).then(res => {
    //         //             this.$message({
    //         //                 message: res.data.message,
    //         //                 type: res.data.flag ? "success" : "error"
    //         //             });
    //         //             if (res.data.flag) {
    //         //                 // 刷新列表
    //         //                 this.findPage();
    //         //             }
    //         //         })
    //         //     }).catch(() => {
    //         //         this.$message({
    //         //             type: 'info',
    //         //             message: '已取消删除'
    //         //         });
    //         //     });
    //         // }
    //     }
    // })


    // {
    //     id: "1",
    //         name: '2016-05-02',
    //     linkUrl: '王小虎',
    //     level: 1,
    //     icon: '上海市普陀区金沙江路 1518 弄',
    //     description: '上海市普陀区金沙江路 1518 弄',
    //     children: [{
    //     id: "11",
    //     name: '王小虎',
    //     linkUrl: '王小虎',
    //     level: 2,
    //     icon: '上海市普陀区金沙江路 1518 弄',
    //     description: '上海市普陀区金沙江路 1518 弄',
    //     children: []
    // }, {
    //     id: "12",
    //     level: 2,
    //     name: '王小虎',
    //     linkUrl: '王小虎',
    //     icon: '上海市普陀区金沙江路 1518 弄',
    //     description: '上海市普陀区金沙江路 1518 弄',
    // }, {
    //     id: "13",
    //     level: 2,
    //     name: '王小虎',
    //     linkUrl: '王小虎',
    //     icon: '上海市普陀区金沙江路 1518 弄',
    //     description: '上海市普陀区金沙江路 1518 弄',
    // }]
    // }, {
    //     id: "2",
    //         level: 1,
    //         date: '2016-05-04',
    //         name: '王小虎',
    //         address: '上海市普陀区金沙江路 1517 弄'
    // }, {
    //     id: "3",
    //         level: 1,
    //         date: '2016-05-01',
    //         name: '王小虎',
    //         address: '上海市普陀区金沙江路 1519 弄'
    // }, {
    //     id: "4",
    //         level: 1,
    //         date: '2016-05-03',
    //         name: '王小虎',
    //         address: '上海市普陀区金沙江路 1516 弄'
    // }
</script>
</html>

